<template>
	<cu-page-base :nav-bar-options="navBarOptions" @clickNavBarLeft="goBack">
		<view class="cu-px-20 cu-pt-30 cu-w-100 cu-d-flex cu-j-center cu-a-center cu-flex-column">
			<block v-if="problemStore.list && problemStore.list.length > 0">
				<view class="cu-w-100 cu-p-20 cu-bg-main cu-shadow cu-border-r-10">
					<block v-for="(item,idx) in problemStore.list">
						<view :key="idx" @click="gotoPage('/pages/oauth/account/problem/problem?idx=' + idx,'navigate')"
							class="cu-w-100 cu-row cu-j-sb cu-ovr-hdn" :style="{
						lineHeight:'60rpx',
						borderBottom: idx === (problemStore.list.length - 1) ? undefined : '1px solid #CCCCCC;'
					}">
							<view>{{item.title}}?</view>
							<view><uni-icons type="forward" size="14"></uni-icons></view>
						</view>
					</block>
				</view>
			</block>

		</view>
	</cu-page-base>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import commMiXin from '@/common/mixin/common-mixin.js';
	export default {
		mixins: [commMiXin],
		computed: {
			...mapState({
				commonStore: state => state.commonStore,
				problemStore: state => state.problemStore,
			})
		},
		data() {
			return {
				navBarOptions: {
					title: "常见问题",
					leftText: "返回",
					leftIcon: "back",
				},
				idx: undefined
			};
		},
		onLoad(e) {
			console.log(e)
			const {
				idx
			} = e
			if (idx !== undefined) {
				this.idx = idx
			}
		},
		methods: {
			goBack(data) {
				this.gotoPage(1, 'navigateBack');
			},
		}
	}
</script>

<style lang="scss">
	.uni-section-content {
		padding: 10px;
	}
</style>